// =====================================================
// UIControl class
// =====================================================
function UIControl()
{
    // ---------------- Properties -----------------
    var Properties = {};
    var Element = null;
    var ElementTag = null;

    // ----------------- Methods -------------------
    this.SetTag = SetTag;
    this.Construct = Construct;
    this.GetElement = GetElement;

    this.AddProperty = AddProperty;
    this.RemoveProperty = RemoveProperty;
    this.GetProperty = GetProperty;
    this.SetProperty = SetProperty;
    this.AddHandler = AddHandler;

    this.GetPropertyList = GetPropertyList;
    this.SetPropertyList = SetPropertyList;

    // ----------- Method definition ----------------
    function SetTag(tag)
    {
        ElementTag = tag;
    }

    function Construct(id, pos, params)
    {
        // create element
        Element = document.createElement(ElementTag);
        Element.setAttribute("draggable", "true");
        Element.style.resize = "both";
        Element.style.overflow = "auto";
        Element.style.position = "relative";
        Element.style.display = "block";
        Element.style.backgroundRepeat = "no-repeat";
        Element.style.backgroundSize = "100% 100%";

        // set element's attributes
        this.AddProperty("ID",          id,	                            Binder.DefaultHtmlBinder("id"));
        this.AddProperty("Size",        new Size("160px", "40px"),      Binder.SizeBinder);
		this.AddProperty("Position",    new Coord(pos.x, pos.y),        Binder.PositionBinder);
        this.AddProperty("Border",      new Border(),                   Binder.BorderBinder);
        this.AddProperty("BackColor",    "Transparent",                 Binder.DefaultCssBinder("backgrounColor"));
        this.AddProperty("BackImage",   "",                             Binder.DefaultCssBinder("backgroundImage"));

        // init events
        var dragHandler = new IDraggable();
        this.AddHandler("dragstart", dragHandler.dragStart);
        this.AddHandler("drag", dragHandler.drag);
        this.AddHandler("dragend", dragHandler.dragEnd);

		// Resize
    }

    function GetElement()
    {
        // return the Element tag
        return Element;
    }

    function AddProperty(name, value, binder)
    {
        // *** this is dummy code ***
        if (typeof value == "undefined")
        {
            Properties[name] = {Binder: Binder.DefaultHtmlBinder("textContent")};
            return;
        }
        // *** end dummy code     ***

        // add to property
        Properties[name] = 
        {
			Binder: binder
        };
		
		binder.SetValue(Element, value);

    }

    function RemoveProperty(name)
    {
        // if the property exist, remove it
        if(typeof Properties[name] != "undefined")
            delete(Properties[name]);
    }

    function GetProperty(name)
    {
        // if the property exist, return it
        return Properties[name].Binder.GetValue(Element);
    }

    function SetProperty(name, value)
    {
        // if the property exist, set its new value
        if(typeof Properties[name] != "undefined")
            Properties[name].Binder.SetValue(Element, value);
    }

    function AddHandler(name, handler)
    {
        // add a event listener to Element
        Element.addEventListener(name, handler, false);
    }


    function GetPropertyList()
    {
        var origin = Properties;
        var props = [];
        for(var k in origin)
            props.push({name: k, value: this.GetProperty(k)});

        return props;
    }

    function SetPropertyList(props)
    {
        for(var i = 0; i < props.length; i++)
            this.SetProperty(props[i].name, props[i].value);
    }
}